import VueRouter from "vue-router";

import Vue from "vue";


//解决路由导航到统一路径重复报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

//配置路由三部曲

//1.定义视图组件

//2.定义routes

//3.展示页面 router-view

//将路由注入到所有的子节点

Vue.use(VueRouter);

//定义路由配置
//路由配置是一个数组,数组中是一个一个的对象,每个对象通过一个path对应一个component

//路由懒加载:通过import()语法,将文件进行分包,单独的切割出一个包,有需要的时候才加载(按需加载)
//分包的好处:加快首页的渲染速度 提高用户体验
//原理:使用了webpack的代码切割功能,当webpack识别到import这样的语法的时候,会自动的分割出一个包
//不合法路由:只要用户访问的路径不在routes配置列表里面都输入不合法路由,我们需要给用户展示404页面
//命名路由的好处 可以直接通过name属性来进行跳转,就不用考虑多级路由路径长的问题
const routes = [
  {
    path: "/login",
    component: () => import(/*webpackChunkName:"login"*/ "../pages/Login"),
  }
];

//实例化路由

export default new VueRouter({
  // mode: "history",
  routes,
});
